<template>
  <transition name="faIn">
    <div class="my-mask-count" v-show="show">
      <div class="myMask"></div>
      <div class="my-mk-ct">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup() {},
};
</script>
<style lang="scss" scoped>
.my-mask-count {
  position: fixed;
  top: 60px;
  left: 0;
  height: calc(100vh - 60px);
  width: 70%;
  .myMask {
    opacity: 0.5;
    background: #000;
    height: 100%;
    width: 100%;
    z-index: 99;
    position: relative;
  }
  .my-mk-ct {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    height: 100%;
    width: 100%;
    background: transparent;
    button {
      height: 50px;
    }
  }
}
.faIn-enter-active,
.faIn-leave-active {
  transition: all 0.5s linear;
}
.faIn-enter-from,
.faIn-leave-to {
  transform: translateX(-100%);
}
</style>